<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>

  </div>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
  components: {TablePage},
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '手机号',
          placeholder: '请输入会员手机号查询',
          key: 'mobile'
        },
        {
          type: 'select',
          label: '金额类型',
          placeholder: '请选择金额类型查询',
          key: 'amountType',
          styles: {width: '150px'},
          options: [
            {label: '余额', value: 'money'},
            {label: '喜糖', value: 'sugar'},
          ]
        },
        {
          type: 'date-picker',
          label: '选择时间',
          placeholder: '请选择时间',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          type: 'index',
          width: '80px'
        },
        {
          label: '交易会员',
          type: 'render',
          width: '230px',
          render: (data) => {
            if (!data.fields || !data.fields.user_base) return ''
            return `<div class="flex flex-center">
                        <img src="${data.fields.user_base.avatar}" style="width: 48px;height: 48px"/>
                        <div class="nickname">${data.fields.user_base.mobile}</div>
                    </div>
`;
          },
        },
        {
          label: '金额类型',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (!data.type) return ''
            return data.type.name
          },
        },
        {
          label: '交易金额',
          prop: 'amount',
          width: '120px'
        },
        {
          label: '交易后额',
          prop: 'afterAmount',
          width: '150px'
        },
        {
          label: '交易备注',
          prop: 'remark',
          width: '300px'
        },
        {
          label: '交易类型',
          prop: 'sourceType',
          width: '100px'
        },
        {
          label: '交易时间',
          prop: 'created',
          width: '200px',
          type: 'date'
        }
      ],
      data: {
        total: 1000,
        list: [],
        page: 1,
        size: 40
      },
      form: {},
      dialogRecharge: false,
      dialogEdit: false

    }
  },

  methods: {
    onload(data) {
      if (data && data.page)
        this.data.page = data.page;
      if (data && data.size)
        this.data.size = data.size;

      Object.assign(data, {
        direction: 'DESC',
        properties: ['id'],
        fields: ['user_base'],
        fidType:'USER'
      })
      this.$api.apiQuery('/api/platform/finance/income/', data).then(res => {
        this.data.total = res.total
        this.data.list = res.data;
      })
    },
  }
}
</script>